<template>
	<div style="background-color: aliceblue;">
		<!-- 欢迎图片 -->
		<div style="display: flex;">
			<image src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/index_sd.gif" style="width: 100px;height: 100px;">
			</image>
			<div style="margin-top: 8%;margin-left: 0%;width: 100%;">
				<van-field :value="question_search" center clearable placeholder="问题搜索" :use-button-slot="true"
					left-icon="search" :border="false" @input="change1">
					<van-button slot="button" size="small" type="info" custom-class="button" @click="search_question()">
						搜索
					</van-button>
				</van-field>
			</div>
		</div>
		<!-- 选项按钮 -->
		<div style="display: flex;justify-content: space-around;margin-top: 5%;">
			<div style="margin-left: 12%;" @click="getMyAnswer()">
				<image src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/myanswer.png"
					style="width: 60px;height: 60px;"></image>
				<div style="font-size: 12px;margin-left: 10%;">我的回答</div>
			</div>
			<div style="position: absolute;margin-left: 20%;" @click="atMy()">
				<image src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/at.png" style="width: 60px;height: 60px;">
				</image>
				<div style="font-size: 12px;margin-left: 15%;">提到我的</div>
				<div id="noread">{{ atnum }}</div>
			</div>
			<div style="margin-right: -10%;" @click="add_question()">
				<image src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/add.png" style="width: 60px;height: 60px;">
				</image>
				<div style="font-size: 12px;margin-left: 10%;">提出问题</div>
			</div>
			<div style="position: absolute;left: 5%;margin-top: 0.5%;" @click="goToCar()">
				<image src="https://czsc.oss-cn-beijing.aliyuncs.com/qdimgs/mini_change.png" style="width: 60px;height: 60px;">
				</image>
				<div style="font-size: 12px;margin-left: 12%;">切换系统</div>
			</div>
		</div>
		<!-- 问题列表 -->
		<div style="margin-top: 5%;">
			<div style="width: 100%;">
				<van-button custom-style="width: 50%;" type="default" @click="getHaveAnswer()">已回答</van-button>
				<van-button custom-style="width: 50%;" type="default" @click="getNoAnswer()">未回答</van-button>
			</div>
			<div v-for="(item, index) in quetion_list" :key="index">
				<van-cell is-link @click="getQuestionDetail(item)">
					<view slot="title">
						<van-row gutter="20">
							<van-col span="3">
								<image v-if="img_type === '1'"
									src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/wh.png"
									style="width: 30px;height: 30px;"></image>
								<image v-if="img_type === '0'"
									src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/dg.png"
									style="width: 30px;height: 30px;"></image>
							</van-col>
							<van-col span="20">
								<view class="van-cell-text" style="font-size: 15px;font-family: '苹方';margin-top: 5px;">
									{{ item.questionTitle }}
								</view>
							</van-col>
						</van-row>
					</view>
				</van-cell>
			</div>
		</div>
	</div>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				quetion_list: [],
				img_type: '',
				atnum: '',
				question_search: ''
			}
		},
		onShow() {
			if (this.img_type === '1') {
				this.getNoAnswer();
			}
			if (this.img_type === '0') {
				this.getHaveAnswer();
			}
		},
		created() {
			this.getHaveAnswer();
			this.getAtNum();
		},
		methods: {
			change1(event) {
				this.question_search = event.detail;
			},
			getAtNum() {
				// 查询提到我的
				uni.request({
					method: 'POST',
					url: 'https://www.gjegm.ltd/czsczq/expertQuestion/getAtByName',
					data: {
						name: uni.getStorageSync('username')

					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					success: (res2) => {
						this.atnum = res2.data.obj.length
					}
				});
			},
			getNoAnswer() {
				this.img_type = '1';
				uni.request({
					method: 'GET',
					url: 'https://www.gjegm.ltd/czsczq/expertQuestion/getNoAnswerQuestion',
					data: {
						type: '1'
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					success: (res1) => {
						this.quetion_list = res1.data.obj;
					}
				});
			},
			getHaveAnswer() {
				this.img_type = '0';
				uni.request({
					method: 'GET',
					url: 'https://www.gjegm.ltd/czsczq/expertQuestion/getHaveAnswerQuestion',
					data: {
						type: '1'

					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					success: (res1) => {
						this.quetion_list = res1.data.obj;
					}
				});
			},
			getQuestionDetail(val) {
				if (this.img_type === '0') {
					uni.navigateTo({
						url: '/pages/question_answer/question_haveanswer?id=' + val.id + '&question=' + val
							.questionTitle + '&question_user=' + val.questionUser +
							'&question_time=' + val.questionTime + '&question_userid=' + val.question_userid +
							'&question_detail=' + val.question
					});
				} else {
					uni.navigateTo({
						url: '/pages/question_answer/question_noanswer?id=' + val.id + '&question=' + val
							.questionTitle + '&question_user=' + val.questionUser +
							'&question_time=' + val.questionTime + '&question_userid=' + val.question_userid +
							'&question_detail=' + val.question
					});
				}
			},
			getMyAnswer() {
				uni.navigateTo({
					url: '/pages/my/my_answer/myAnswer'
				});
			},
			atMy() {
				uni.navigateTo({
					url: '/pages/my/my_answer/atMy'
				});
			},
			add_question() {
				uni.navigateTo({
					url: '/pages/question/add_question'
				});
			},
			search_question() {
				uni.navigateTo({
					url: '/pages/question_answer/search_question?title=' + this.question_search
				});
			},
			goToCar(){
				uni.navigateTo({
					url: '/pages/menu/index'
				})
			}
		}
	}
</script>

<style>
	.imgs_index {
		height: 100vh;
		border-radius: 5px
	}

	.child {
		width: 40px;
		height: 40px;
		background: #f2f3f5;
		border-radius: 4px;
	}

	#noread {
		position: absolute;
		left: 90%;
		top: 0%;
		color: #fff;
		width: 30%;
		height: 20px;
		background-color: red;
		text-align: center;
		line-height: 18px;
		font-weight: bolder;
		border-radius: 20%
	}
</style>
